<template>
  <div>
    <!--  搜索栏  -->
    <div style="margin-bottom: 20px;margin-top: 20px">
      <el-input v-model="searchName" placeholder="请输入需要查询的名字"
                suffix-icon="el-icon-search" style="width: 200px;"
                @keyup.enter.native="loadPost"></el-input>
      <el-select v-model="sex" filterable placeholder="请选择性别"
                 style="margin-left: 10px">
        <el-option
            v-for="item in sexs"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 10px" @click="loadPost">查询</el-button>
      <el-button type="success" style="margin-left: 10px" @click="resetParam">重置</el-button>
    </div>

    <!--  表格  -->
    <el-table :data="tableData" stripe border highlight-current-row
              :header-cell-style="{background:'#f3f6fd',color:'#555','text-align':'center'}"
              :cell-style="{'text-align':'center'}" @current-change="handleCurrentChange1"
    >
      <el-table-column prop="id" label="编号" width="80">
      </el-table-column>
      <el-table-column prop="username" label="账号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="用户名" width="180">
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="100">
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="100">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.sex === 1 ? 'primary' : 'success'"
              disable-transitions>{{ scope.row.sex === 1 ? '男' : '女' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="roleId" label="角色" width="180">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.roleId === 0 ? 'danger' : (scope.row.roleId === 1 ? 'primary' : 'success')"
              disable-transitions>{{ scope.row.roleId === 0 ? '超级管理员' : (scope.row.roleId === 1 ? '管理员' : '普通用户') }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="电话" >
      </el-table-column>

    </el-table>
    <!--  分页  -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[ 4 , 5 , 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>


  </div>
</template>

<script>
export default {
  name: "UserMange",
  data() {
    return {
      tableData: [],
      pageSize: 5,
      pageNum: 1,
      total: 0,
      searchName: '',
      sex: '',
      sexs: [
        {
          value: '1',
          label: '男'
        },
        {
          value: '2',
          label: '女'
        }
      ],
    }
  },
  methods: {
    handleCurrentChange1(val) {
      this.$emit("doSelectUser",val)
    },
    //分页查询数据
    loadPost() {
      this.$axios.post(this.$httpUrl + '/user/listPage', {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        param: {
          name: this.searchName,
          sex: this.sex,
          roleId : '2'
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.total
        } else {
          alert('获取数据失败')
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = 1
      this.pageSize = val
      this.loadPost()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val
      this.loadPost()
    },
    resetParam() {
      this.searchName = '';
      this.sex = '';
    },
  },
  beforeMount() {
    this.loadPost();
  }
}
</script>

<style scoped>

</style>